Lawz's blog

# 根据轮播图改变背景色

1.gif

# 实现思路

轮播图这里直接就用swiper了，在切换事件里：

获得图片，用canvas画出，再调用getImageData获取某位置信息就可以做到了

话不多说。上代码

# 代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.min.css">
    <script src="https://unpkg.com/swiper/js/swiper.min.js"></script>
    <style>
        .swiper-container {
            width: 600px;
        }
        
        .swiper-container img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="./1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="./4.jpg" alt=""></div>
        </div>
    </div>
    <script>
        var mySwiper = new Swiper('.swiper-container', {
            on: {
                slideChangeTransitionStart: function() {
                    console.log('改变了，activeIndex为' + this.activeIndex);
                    getImgColor(this.activeIndex)
                },
            },
        })
        const getImgColor = (index) => {
            switch (index) {
                case 0:
                    img = './1.jpg'
                    break
                case 1:
                    img = './2.jpg'
                    break
                case 2:
                    img = './3.jpg'
                    break
                case 3:
                    img = './4.jpg'
                    break
            }
            const ima = new Image()
            const canva = document.createElement('canvas')
            ima.src = img
                // ima.crossOrigin = 'anonymous' // 处理跨域图片 没用！
            ima.onload = () => {
                const ctx = canva.getContext('2d')
                ctx.drawImage(ima, 0, 0, 600, 600)

                const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data; // 获取背景色
                document.body.style.background = `rgba(${r}, ${g}, ${b}, ${a})`
            }
        }
        window.onload = () => {
            getImgColor(0)
        }
    </script>
</body>

</html>

← 彩带 →